// vuex 频道管理模块

// 导入频道接口
import { reqGetAllChannels, reqGetChannels } from '@/api/channels.js'

// 存储数据，相当于vue中的data，注册到全局后，使用$store.state.属性值 获取数据
const state = {
  // 用户的频道数据
  channels: [],
  // 后端的所有频道
  allChannels: []
}

// 同步操作state中的数据
const mutations = {
  // 设置（赋值）用户频道
  setChannels (state, channels) {
    state.channels = channels
  },

  // 赋值所有频道
  setAllChannels (state, allChannels) {
    state.allChannels = allChannels
  },

  // 添加频道
  addChannel (state, channel) {
    // 往数组中添加频道
    state.channels.push(channel)
  },

  // 删除频道
  deleteChannel (state, channel) {
    // 将入参id相等的channel，从channels中过滤掉
    state.channels = state.channels.filter(e => e.id !== channel.id)
  }
}

// 异步操作state中的数据
const actions = {
  /**
   * 获取频道，并存放到state中
   * context.commit('绑定操作state的方法名'),
   * 方法一般存放在上面的`mutations`中
   * @param context context作为第一个参数是固定写法
   * @returns {Promise<void>}
   */
  async getChannelsAsync (context) {
    const res = await reqGetChannels()
    context.commit('setChannels', res.data.data.channels)
  },

  /**
   * 获取所有频道
   * @param context
   * @returns {Promise<void>}
   */
  async getAllChannelsAsync (context) {
    const res = await reqGetAllChannels()
    context.commit('setAllChannels', res.data.data.channels)
  }
}

// 从state中派生出一些状态，这些状态是以来state的，其实就是对state的数据进行二次过滤
// 便于组件的具体业务直接使用，这种处理不会改变state中的原始数据
const getters = {
  // 可选的频道，方法名自定义即可
  optionalChannels (state) {
    // 遍历所有的频道
    // 将过滤后的数据返回
    return state.allChannels.filter(channel => {
      // 判断用户订阅的频道id是否和channel.id一致
      const index = state.channels.findIndex(e => e.id === channel.id)
      // 一致的会返回list数组具体下标的数据，不一致的会返回 -1
      // 这边要获取用户未订阅的，所以返回不是用户订阅的频道下标数据，即 index === -1
      return index === -1
    })
  }
}

// 导出
export default {
  state,
  mutations,
  actions,
  getters,
  // 默认情况下（false），模块内部的 action、mutation 和 getter 是注册在**全局命名空间**的
  // true，要添加映射, 可以加上模块名, 来找对应模块的 state/mutations/actions/getters
  namespaced: true,
}
